@extends('wap.layouts.master')
@section('title','订场服务')

@section('content')

<div class="aw-main aw-booking-index">
	<div class="aw-index-logo">
		<div class="aw-icon aw-icon-booking aw-index-logo-img"></div>
		<div class="aw-index-logo-text">订场服务</div>
	</div>
	<!--条件筛选-开始-->
	<ul class="aw-assest-form aw-bg-fff">
		<li class="aw-form-li">
			<div class="aw-left">区域选择</div>
			<div class="aw-conter">
				<select class="select-none" id="store_id" :value="form.store_id" v-model="form.store_id">
					<option value="0">请选择</option>
					<option v-for="(list,key) in list_store" :value="list.id">@{{list.store_name}}</option>
				</select>
			</div>
			<div class="aw-icon aw-icon-more aw-right"></div>
		</li>
		<li class="aw-form-li">
			<div class="aw-left">场地类型</div>
			<div class="aw-conter">
				<select class="select-none" id="type" :value="form.type" v-model="form.type">
					<option value="0">不限</option>
					<option v-for="(list,key) in list_type" :value="list.type">@{{list.type_text}}</option>
				</select>
			</div>
			<div class="aw-icon aw-icon-more aw-right"></div>
		</li>
		<li class="aw-form-li aw-hide">
			<div class="aw-left">预订时段</div>
			<div class="aw-conter">
				<select class="select-none" id="time" :value="form.time" v-model="form.time">
					<option value="0">不限</option>
					<option v-for="(list,key) in list_time" :value="key+1">@{{list.start_time}}-@{{list.end_time}}</option>
				</select>
			</div>
			<div class="aw-icon aw-icon-more aw-right"></div>
		</li>
	</ul>
	<div class="aw-index-btn"><button v-on:click="Btn_Search()" type="submit" class="aw-assest-btn aw-btn-radius aw-btn-bgcolor-lvse">搜索</button></div>
	<!--条件筛选-结束-->
</div>

<!--底部导航-开始-->
@include('wap.layouts.nav_booking')
<!--底部导航-结束-->

@section('pagejs')
@parent
<script type="text/javascript">
    $('#aw-icon-nav-booking').addClass('hover');

    var MJS_URLArry=URLArry;
var Vue_Data={
	list_store:{},//获取门店列表
	list_type:{},//获取场地类型列表
	list_time:{},//获取比赛时段列表
	form:{store_id:0,type:0,time:0},//请求参数
};
//获取场地列表
var AD_list_store={
	api:'/api/storefront/list',
	form_data:{page_num:100},
	tips:false,
}
getData(AD_list_store,function(ajax_data){
	Vue_Data.list_store=ajax_data.list;
})
//获取场地类型
var AD_list_type={
	api:'/api/storefront/fields',
	form_data:{store_id:Vue_Data.store_id,page_num:100},
	tips:false,
}
function Get_List_Type(){
	getData(AD_list_type,function(ajax_data){
		Vue_Data.list_type=ajax_data.list;
		vm.form.type=0;
	})
}
Get_List_Type()
//获取比赛时段列表
var AD_list_time={
	api:'/api/field/time-list',
	form_data:{},
	tips:false,
}
getData(AD_list_time,function(ajax_data){
	Vue_Data.list_time=ajax_data;
})
vm=new Vue({
	el:'#Vue-body',
	data:Vue_Data,
	methods:{
		Btn_Search:function(){
			if(this.form.store_id==0){
				msgTips('请选择区域');
				return;
			}
			//location.href='/wap/booking/choice?store_id='+this.form.store_id+'&type='+this.form.type+'&time='+this.form.time;
			location.href='/wap/booking/choice?store_id='+this.form.store_id+'&type='+this.form.type;
		}
	},watch:{
        'form.store_id':function(val,olval){
        	console.log('val')
        	console.log(val,olval)
        	AD_list_type.form_data.store_id=val;
        	Get_List_Type()
        }
    }
})
</script>
@endsection

@endsection

